<template>
    <el-container>
      <el-main>
        <el-form :model="form.model" :rules="form.rules" ref="formRef" label-width="100px">
          <el-form-item label="模版名称" prop="name">
            <el-input v-model="form.model.name" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="模版ID" prop="path">
            <el-input v-model="form.model.templateId" placeholder="请输入路径"></el-input>
          </el-form-item>
          
          <el-form-item label="模版分类">
            <el-select v-model="form.model.category" placeholder="请选择模版分类">
                <el-option label="电商" value="elect" />
                <el-option label="团购" value="group" />
            </el-select>
          </el-form-item>
          <el-form-item label="模版类型">
            <el-radio-group v-model="form.model.type">
                <el-radio value="high">高级模版</el-radio>
                <el-radio value="audio">银屏模版</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="模版视频" prop="video">
            <sa-uploader v-model="form.model.video" fileType="video" @success="onSuccess"></sa-uploader>
          </el-form-item>
          <el-form-item label="视频地址" prop="group">
            <el-input v-model="form.model.url" placeholder="请输入分组" type="textarea"></el-input>
          </el-form-item>
          <el-form-item label="模版参数" prop="group">
            <el-input v-model="form.model.param" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer class="sa-footer--submit">
        <el-button
          v-if="modal.params.type == 'add'"
          v-auth="'shop.admin.data.page.add'"
          type="primary"
          @click="confirm"
          >保存</el-button
        >
        <el-button
          v-if="modal.params.type == 'edit'"
          v-auth="'shop.admin.data.page.edit'"
          type="primary"
          @click="confirm"
          >更新</el-button
        >
      </el-footer>
    </el-container>
  </template>
  <script setup>
    import { onMounted, reactive, ref, unref } from 'vue';
    // import { api } from '../data.service';
    import { cloneDeep } from 'lodash';

    import { useFile } from '@/sheep/hooks';
  
    const emit = defineEmits(['modalCallBack']);
    const props = defineProps({
      modal: {
        type: Object,
      },
    });
    // 添加 编辑 form
    let formRef = ref(null);
    const form = reactive({
      model: {
        name: '',
        templateId: '',
        category:'elect',
        type:'high',
        video:'',
        url:'',
        param:'',
      },
      rules: {
        name: [{ required: true, message: '请输入模版名称', trigger: 'blur' }],
        templateId: [{ required: true, message: '请输入模版ID', trigger: 'blur' }],
        category: [{ required: true, message: '请选择模版ID', trigger: 'blur' }],
        type: [{ required: true, message: '请选择模版类型', trigger: 'blur' }],
        video: [{ required: true, message: '请上传模版视频', trigger: 'blur' }],
        url: [{ required: true, message: '请输入视频地址', trigger: 'blur' }],
        param: [{ required: true, message: '请输入模版参数', trigger: 'blur' }],
      },
    });
    const loading = ref(false);
    // 获取详情
    async function getDetail(id) {
      loading.value = true;
    //   const { error, data } = await api.page.detail(id);
    //   error === 0 && (form.model = data);
      loading.value = false;
    }
    // 表单关闭时提交
    async function confirm() {
      // 表单验证
      unref(formRef).validate(async (valid) => {
        if (!valid) return;
        let submitForm = cloneDeep(form.model);
        const { error } =
          props.modal.params.type == 'add'
            ? await api.page.add(submitForm)
            : await api.page.edit(props.modal.params.id, submitForm);
        if (error == 0) {
          emit('modalCallBack', { event: 'confirm' });
        }
      });
    }
    async function init() {
      if (props.modal.params.id) {
        await getDetail(props.modal.params.id);
      }
    }
    onMounted(() => {
      init();
    });
  </script>
  